<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        font-size: 22px;
        text-align: center;
    }
</style>

<body>
<h1>
    <p></p>
</h1>

</body>
<script>
    //倒计时  主要得到用户输入的时间减掉当前总毫秒数
    //将times剩下总时间设置全局变量  方便倒计时函数可以调用
    var times = null;

    function countDown(time) {
        var nowTime = +new Date(); //获取当前总毫秒数
        var inputTime = +new Date(time); //用户输入的总毫秒数
        times = (inputTime - nowTime); //剩余的总秒数
        var d, h, m, s;
        if (times > 0) {
            //转换为天
            d = Math.floor(times / 1000 / 60 / 60 / 24);
            h = Math.floor(times / 1000 / 60 / 60 % 24);
            //转换为分
            m = Math.floor(times / 1000 / 60 % 60);
            //转换成秒
            s = Math.floor(times / 1000 % 60);
            //设置成时钟格式 00：00：00 利用三元运算符
            h = h < 10 ? "0" + h : h
            m = m < 10 ? "0" + m : m
            s = s < 10 ? "0" + s : s
            return d + "天 " + h + ":" + m + ":" + s;
        } else {
            return "0天 " + '00' + ":" + '00' + ":" + '00';

        }
    }

    var p = document.querySelector("p");
    var timer = setInterval(function () {
        p.innerHTML = countDown('2023-09-14 18:04:00');
        if (times < 0) {
            console.log('00')
            clearInterval(timer)
        }
    }, 1000);
</script>

</html>
